<template>
	<Row class="rowboxs">
		<Col span="24">
            <h3>本月生产计划</h3>
        </Col>
        <Col span="24" v-for="(item,index) of columns">
            <Card>
                <p slot="title" class="pltlelft">
                    <span>{{item.title}}</span>
                    <span>本月计划：320吨</span>
                    <span>上月产量：290吨</span>
                    <span>日平均：10吨</span>
                </p>
                <p class="planp2">
                  <span>截止：本日</span>
                  <span>已完成:150吨</span>
                  <span>剩余：170吨</span>
                  <span style="color:red;">风险：10%</span>
                </p>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          "title": "甲醇",
          "degree": 4,
          "cls": "clr",
          "ofe": 0
        },
        {
          "title": "苯加氢",
          "degree": 3,
          "cls": "clr",
          "ofe": 1
        },
        {
          "title": "乙醇胺",
          "degree": 2,
          "cls": "mtop",
          "ofe": 0
        },
        {
          "title": "丙烯腈",
          "degree": 1,
          "cls": "mtop",
          "ofe": 1
        }
      ]
    };
  }
};
</script>
<style scoped>
  .pltlelft{
      text-align: left;
  }
  .pltlelft>span:nth-of-type(1){
      color: rgb(204, 47, 19);
      font-size: 16px;
  }
  .pltlelft>span{
      display: inline-block;
      width: 25%;
  }
  .pltlelft>span:nth-of-type(1){
      width: 10%;
  }
  .planp2>span{
      display: inline-block;
      width: 20%;
  }
  .rowboxs{
    padding: 20px;
    padding-top: 5px;
  }
  .mtop{
	margin-top: 20px;
  }
  .spacol{
    color: #FFAC2D;
  }
  .clr .spacol{
    color: red; 
  }
</style>